<include file="public/layout" />
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-card layui-col-md12">
          <div class="layui-card-header">素材管理</div>
          <div class="layui-card-body" pad15>
						<div class="layui-col-md12">
							<table id="tabledata" lay-filter="tabledata"></table>
						</div>
          </div>
        </div>
    </div>
  </div>
	<script>
  var table = layui.table;
	var datawhere = {};
  //数据表
  var tableIns = table.render({
    elem: '#tabledata'
    ,url: "{$Request.url}" //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
			//{type:"checkbox"},
      //{field: 'media_id', title: '素材ID',width:180},
      {field: 'content', title: '素材内容',width:350,templet:function(d){
				var news_item = d.content.news_item;
				var html ='<div style="width:312px;padding:12px;border:1px solid #ddd">';
				for(var i in news_item){
					var m = news_item[i]
					if(i==0){
						html+='<div style="width:100%">';
						html+='<div style="position:relative"><img src="'+m.thumb_url+'" style="width:288px;height:160px;max-width:288px"/><div style="height:40px;padding:0 10px;width:100%;position:absolute;bottom:0;left:0;color:#fff;background:rgba(100,100,100,0.5);display:flex;align-items:center;word-wrap: break-word;word-break: break-all;overflow:hidden;">'+m.title+'</div></div>';
						html+='';
						html+='</div>';
					}else{
						html+='<div style="width:100%;margin-top:5px;padding-top:5px;border-top:1px solid #ddd;display:flex">';
						html+='<div style="flex:1;display:flex;align-items:center;">'+m.title+'</div>';
						html+='<div><img src="'+m.thumb_url+'" style="width:50px;height:50px"/></div>';
						html+='</div>';
					}
				}
				html+='</div>';
				return html;
      }},
      {field: 'create_time', title: '创建时间',templet:function(d){ return date('Y-m-d H:i',d.content.create_time)}},
      {field: 'update_time', title: '更新时间',templet:function(d){ return date('Y-m-d H:i',d.content.update_time)}},
      {field: 'operation', title: '操作',templet:function(d){
				return '<button class="table-btn" onclick="choosenews(\''+d.media_id+'\')">选择</button></div>';
      }}
    ]]
  });
	//排序
	table.on('sort(tabledata)', function(obj){
		datawhere.field = obj.field;
		datawhere.order = obj.type;
		tableIns.reload({
			initSort: obj,
			where: datawhere
		});
	});
	//检索
	layui.form.on('submit(LAY-app-forumreply-search)', function(obj){
		var field = obj.field
		var olddatawhere = datawhere
		datawhere = field
		datawhere.field = olddatawhere.field
		datawhere.order = olddatawhere.order
		tableIns.reload({
			where: datawhere,
			page: {curr: 1}
		});
	})
	function choosenews(media_id){
		window.parent.choosenews(media_id);
		closeself();
	}
	</script>
</body>
</html>